<script setup lang="ts">
import type { SongInfo } from '@/model/songInfo'
import { GoEnd, GoStart, PauseOne, PlayOne, SquareSmall } from '@icon-park/vue-next'

// const host = '192.168.192.221'
// const port = '50081'
const songIconPath = '/images/songIcon'
const songFilePath = '/songs'
// const prefix = `http://${host}:${port}/musicpill` // 网络文件
const prefix = '' // 本地文件

const songList: SongInfo[] = JSON.parse(useRoute().query.songListJsonString as string) as SongInfo[]
let currentIndex: number = Number(useRoute().query.currentIndex)

// let isAutoPlay = false
let song = ref(songList[currentIndex])
// let isPlayingRef = isAutoPlay ? ref(true) : ref(false)
let isPlayingRef = ref(true)
let currentTime = ref(0)
let currentTimeFormat = ref('00:00')
let duration = ref(0)
let durationFormat = ref('59:59')
let isUpdate = true

const onLoad = () => {
    isPlayingRef.value = !window.navigator.userAgent.match(/(iPhone|iPod|ios|iPad)/i)
}

const getImageUrl = (songIcon: string) => {
    return `${prefix}${songIconPath}/${songIcon}`
}

const getAudioUrl = (songPath: string) => {
    return `${prefix}${songFilePath}/${songPath}`
}

const onClickLeft = () => {
    clearInterval(timer)
    history.back()
}
const audio = ref()

// 获取歌曲总时间（秒）
const getDuration = () => {
    if (audio.value) {
        duration.value = audio.value.duration
        durationFormat.value = mediaTools.msToCountdownTime(duration.value * 1000)
    }
}

// 获取歌曲当前时间（秒）
const getCurrentTime = () => {
    if (audio.value) {
        currentTime.value = audio.value.currentTime
        if (currentTime.value > duration.value) {
            currentTime.value = duration.value
        }
        currentTimeFormat.value = mediaTools.msToCountdownTime(currentTime.value * 1000)
        // console.log('current value', currentTime.value)
    }
}

// 进度变化且结束拖动后
const onChange = (value: number) => {
    audio.value.currentTime = value
}

// 开始拖动时
const dragStart = () => {
    isUpdate = false
}

// 结束拖动时
const dragEnd = () => {
    isUpdate = true
}

// 定时更新进度
const timer = setInterval(() => {
    if (isUpdate) {
        getCurrentTime()
    }
}, 200)

// 进入页面播放
const initSong = () => {
    getDuration()

    if (isPlayingRef.value) {
        audio.value.play()
    }
}

// 上一首
const preview = () => {
    if (currentIndex === 0) {
        currentIndex = songList.length - 1
    } else {
        currentIndex--
    }
    song.value = songList[currentIndex]
    audio.value.src = getAudioUrl(song.value.songPath)

    initSong()
}

// 暂停
const pause = () => {
    audio.value.pause()
    isPlayingRef.value = false
}

// 播放
const play = () => {
    isPlayingRef.value = true
    audio.value.play()
}

// 下一首
const next = () => {
    if (currentIndex === songList.length - 1) {
        currentIndex = 0
    } else {
        currentIndex++
    }
    song.value = songList[currentIndex]
    audio.value.src = getAudioUrl(song.value.songPath)

    initSong()
}

// 停止
const stop = () => {
    audio.value.pause()
    isPlayingRef.value = false
    audio.value.currentTime = 0
}
</script>

<template>
    <van-col class="mr-[10vw] ml-[10vw]">
        <van-nav-bar title="播放" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-row justify="center" class="mt-[8vh]">
            <van-image fit="contain" radius="5vw" width="50vw" height="50vw" :src="getImageUrl(song.songIcon)" />
        </van-row>

        <van-row justify="center" class="text-[6vw] mt-[3vh]">{{ song.songName }}</van-row>

        <van-row justify="space-between" class="mt-[3vh] text-[2vw]">
            <ran-row class="text-[4vw]">{{ currentTimeFormat }}</ran-row>
            <ran-row class="text-[4vw]">{{ durationFormat }}</ran-row>
        </van-row>
        <van-slider
            v-model="currentTime"
            button-size="1.5vh"
            :max="duration"
            bar-height="0.75vh"
            class="mt-[0.5vh]"
            @change="onChange"
            @drag-start="dragStart"
            @drag-end="dragEnd"
        />
        <van-row justify="space-between" class="pl-[10vw] pr-[10vw] pt-[5vh]">
            <GoStart size="8vw" fill="#02055a" @click="preview" />
            <PauseOne v-if="isPlayingRef" size="8vw" fill="#02055a" @click="pause" />
            <PlayOne v-if="!isPlayingRef" size="8vw" fill="#02055a" @click="play" />
            <GoEnd size="8vw" fill="#02055a" @click="next" />
            <SquareSmall size="8vw" fill="#02055a" @click="stop" />
        </van-row>
    </van-col>

    <audio ref="audio" @load="onLoad" @loadedmetadata="initSong">
        <source :src="getAudioUrl(song.songPath)" type="audio/mp3" />
    </audio>
</template>
